<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('用户上传文件')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content pt-md">
    <form class="form-horizontal" id="form-doc-add">
        <input name="filePath" type="hidden" id="filePath"/>
        <input name="fileName" type="hidden" id="fileName"/>
        <input name="fileType" type="hidden" id="fileType" value="1"/>
        <input name="parentId" type="hidden" th:value="${parentId}"/>
        <div class="form-group">
            <label class="col-sm-3 control-label">文件：</label>
            <div class="col-sm-8">
                <input type="file" name="file" id="imgUpload" class="imgFile form-control">
                <span class="help-block m-b-none">导入的文件大小请不要超过50M；</span>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
    var prefix = ctx + "gy/userDoc"
    $("#form-doc-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        console.log($('#form-doc-add').serialize())
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-doc-add').serialize());
        }
    }

    // ------------------ 文件上传
    $("#imgUpload")
        .fileinput({
            language: "zh", //设置语言
            uploadUrl: ctx + 'common/upload', //上传的地址
            allowedFileExtensions: ["jpg", "png", "jpeg", "bmp", "xls", "doc", "docx", "ppt", "pdf","zip","txt"], //接收的文件后缀
            theme: "fa",      // 主题设置
            //   initialPreview: url1 + filePath + fileName,        // 初始预览区域显示的图片
            initialPreviewAsData: true,
            // initialPreviewConfig: [
            //      { type: "image", fileType: "image", caption: fileName }
            //   ],
            dropZoneEnabled: false,          // 禁止点击预览区域进行文件上传操作
            maxFileCount: 1,                    // 最大上传为 1
            maxFileSize: 51200,
            showUpload: false,             // 不显示上传按钮，选择后直接上传
            previewClass: "uploadPreview",
        })
        .on("change", function () {
            // 清除掉上次上传的图片
         //   $(".uploadPreview").find(".file-preview-frame:first").remove();
           // $(".uploadPreview").find(".kv-zoom-cache:first").remove();
        })
        .on("filebatchselected", function (e, files) {
            $(this).fileinput("upload");             // 文件选择完直接调用上传方法。
        })
        .on("fileuploaded", function (e, data, previewiId, index) {       // 上传完成后的处理
            console.log("fileuploaded")
            var form = data.form,
                files = data.files,
                extra = data.extra,
                response = data.response,        // 响应
                reader = data.reader;          // 文件对象

            if (response.code == "0") {
                $("#fileName").val(response.originalFilename)
                $("#filePath").val(response.url)
                var img = new Image();     // 这里上传的是图片，对图片处理获取图片的分辨率
                img.src = response.url;
                if (img.complete) {
                    $(this).attr("data-displayReso", img.width + "*" + img.height);
                } else {
                    img.onload = function () {
                        $(this).attr("data-displayReso", img.width + "*" + img.height);
                    };
                }
            }
        });

    //------------------
</script>
</body>
</html>
